import React from 'react'
import './css/Breadcrumb.css'

class Breadcrumb extends React.Component { 
    constructor(props) {
        super(props);
        this.state = { 
        };
    }
  
    componentWillMount = () => {
        if(this.props.config !== undefined) this.config = Object.assign(this.config,this.props.config); 
        this.info.showData =this.config.data; 
    }  
    componentDidMount = () => {    
    }

    config={ 
         data:[//面包屑默认展示数据
                {
                    name:'第一级',
                    val:0
                }, 
        ],
        style:{
                boxW:300,
                boxH:46
        },
        itemDefaultClick:(i)=>{ //默认点击事件
            if(this.config.itemClick){
                 this.config.itemClick(i,this.config.data[i])//外面传的点击事件
            }
            i++;
            this.info.showData =this.config.data.slice(0,i);  //展示的数据
            this.setState() 

        }
    } 
    info={
        showData:[  ]
    }
    render() {  
        return (
            <div className="Breadcrumb"  style={{width:this.config.style.boxW,height:this.config.style.boxH}} >            
                   {
                    this.info.showData.map((item,i) => {
                         let str ='',lastStyle={};
                        if(i<this.info.showData.length-1){//最后一个不用 > 间隔显示
                            str = <span className='separator'>></span>
                        }else{//最后一个加粗，颜色变成灰色
                            lastStyle={
                                fontWeight:500, 
                                color:' rgba(0,0,0,.65)',
                            }
                        } 
                        return (
                            <div onClick={() => this.config.itemDefaultClick(i)}> 
                                <span className='item' style={lastStyle}>{item.name}</span>
                                {str} 
                            </div>
                        )
                    } )
                   } 
             </div>
        )
    }
}

export default Breadcrumb


